<template>
	<view class="add_box">
		<textarea class="textarea" v-model="sn" placeholder-class="textareaPlace" placeholder="SN-0,SN-1," cols="30"
			rows="10"></textarea>
		<view class="tip_text">
			SN和备注名之间通过逗号隔开，分号结束，可换行 <br />
			SN绑定失败，会显示在输入框内
		</view>
		<view class="box_f" @click="$fun.jump('/pageC/grouping?status=1')">
			<view class="l">
				{{group_name}}
			</view>
			<view class="r">
				<image src="/static/newProject/equipment/icon_r.png" mode=""></image>
			</view>
		</view>
		<view class="button" @click="addBind(sn)">
			添加
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sn: '',
				group_id: null,
				group_name: '选择分组'
			};
		},
		onLoad(options) {
			if (options.sn) {
				this.sn = options.sn
				this.addBind(options.sn)
			}
		},
		onShow() {
			let _this = this
			uni.$on('updateData', function(data) {
				_this.group_id = data.id
				_this.group_name = data.name
			})
		},
		onNavigationBarButtonTap(e) {
			let _that = this
			//#ifdef H5
			this.$fun.msg('H5暂不支持扫码！')
			//#endif
			//#ifdef APP-PLUS
			uni.scanCode({
				success: function(res) {
					_that.sn = res.result
					_that.addBind(_that.sn)
				}
			});
			//#endif

		},
		methods: {
			addBind(sn) {
				if (this.group_id == null) {
					this.$fun.msg('请选择分组')
					return
				}
				this.$fun.ajax.post('butt/bind', {
					sn,
					group_id: this.group_id
				}).then(res => {
					this.$fun.msg(res.msg)
					if (res.code == 1) {
						this.sn = ""
						this.$fun.jump('', 4, 1200)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.add_box {
		margin: 30rpx;
		box-sizing: border-box;

		.textarea {
			width: 100%;
			height: 320rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			padding: 20rpx 60rpx;
			box-sizing: border-box;
		}

		.textareaPlace {
			font-size: 20rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #CCCCCC;
		}

		.tip_text {
			padding: 20rpx;
			font-size: 20rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}

		.box_f {
			width: 100%;
			height: 90rpx;
			background: #F6F6F6;
			display: flex;
			align-items: center;

			.l {
				width: 90%;
				margin-left: 18rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.r {
				image {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.button {
			margin: 30rpx auto;
			width: 200rpx;
			height: 60rpx;
			background: linear-gradient(-30deg, #5990FF 0%, #55aaff 100%);
			border-radius: 30rpx;
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>